<script setup lang="ts">
import { ref } from "vue";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { computed, onMounted, reactive } from "vue";
import { getDataBySQLDesc } from "@/api/common";
import moment from "moment";

defineOptions({
  name: "Arrived"
});
const option = ref({
  title: {
    text: "",
    show: true,
    x: "center",
    y: "center",
    textStyle: {
      rich: {
        a: {
          fontSize: 20,
          color: "#999",
          padding: [0, 0, 25, 0]
        },
        b: {
          fontSize: 30,
          color: "#999",
          fontFamily: "alibabaPuhuiM"
        }
      }
    }
  },

  polar: {
    center: ["50%", "50%"],
    radius: ["60%", "75%"]
  },
  angleAxis: {
    max: 100,
    show: false
  },
  radiusAxis: {
    type: "category",
    show: true,
    axisLabel: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      name: "",
      type: "bar",
      roundCap: true,
      showBackground: true,
      backgroundStyle: {
        color: "rgba(19, 84, 146, .4)"
      },
      data: [],
      coordinateSystem: "polar",
      itemStyle: {
        normal: {
          color: "#005DCF"
        }
      }
    },
    {
      name: "",
      type: "gauge",
      radius: "54%",
      axisLine: {
        lineStyle: {
          color: "rgba(0, 182, 253, .4)",
          width: 1
        }
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      itemStyle: {
        show: false
      },
      detail: {
        show: false
      },
      data: [],
      pointer: {
        show: false
      }
    }
  ]
});

const option2 = ref({
  xAxis: [
    {
      type: "category",
      data: [],
      axisPointer: {
        type: "shadow"
      }
    }
  ],
  series: [
    {
      type: "bar",
      name: "总批次",
      data: [{ name: "itemA", value: 55 }],
      label: {
        show: true,
        position: "top" // 标签位置设为顶部
      },
      axisLabel: {
        formatter: "{value}%",
        style: {
          fill: "#fff"
        }
      },
      axisTick: {
        style: {
          stroke: "#fff"
        }
      },
      animationCurve: "easeInOutBack"
    }
  ]
});
const config = ref({
  header: ["采购单/项次/分批序", "品名", "料件编号", "数量", "单位"],
  data: [],
  headerHeight: 50,
  index: true,
  columnWidth: [40, 300],
  align: "center",
  headerBGC: "#f0f2f5",
  oddRowBGC: "#fff",
  evenRowBGC: "#fff",
  rowNum: 10,
  bodyStyle: {
    fontSize: 14,
    color: "#000" // 表体字体颜色修改为黑色
  }
});
const data3 = ref({
  time: "",
  NotBatch: "",
  AllBatch: ""
});
const extractValues = (obj: Record<string, any>) => {
  return Object.entries(obj)
    .filter(([key]) => !["交期类型"].includes(key))
    .map(([_, value]) => value);
};

// 获取参数的通用函数
const fetchParams = async (hsmc: string): Promise<Record<string, string[]>> => {
  const params = { action: "public/get_bi_sjfw", hsmc };
  const { data } = await getDataBySQLDesc(params);

  return data.reduce((acc, item) => {
    acc[item["参数编码"]] = item["参数值"];
    return acc;
  }, {});
};
// 滚屏
const getTableData = async () => {
  const res = await fetchParams("get_ckdhkb_mrdhfx");

  let params = { action: "biz/reports/get_ckdhkb_jrwdhmx", ...res };

  const { data } = await getDataBySQLDesc(params);
  config.value.data = [];
  data.map(item => {
    let arr = extractValues(item);
    config.value.data.push(arr);
  });
};
// 柱状图
const getChartsData2 = async () => {
  const res = await fetchParams("get_ckdhkb_mrdhfx");

  let params = { action: "biz/reports/get_ckdhkb_jrwdhmx", ...res };
  const { data } = await getDataBySQLDesc(params);
  option2.value.series[0].data = [];
  option2.value.xAxis[0].data = [];
  data.map(item => {
    option2.value.series[0].data.push({
      name: item.到厂日期,
      value: item.总批次
    });
    item.到厂日期 = moment(item.到厂日期).format("YYYY-MM-DD");
    option2.value.xAxis[0].data.push(item.到厂日期);
  });
};
// 计算到下一个 0 点的毫秒数
const getTimeUntilMidnight = () => {
  const now = new Date();
  const midnight = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate() + 1,
    0,
    0,
    0,
    0
  );
  return midnight.getTime() - now.getTime();
};

// 设置定时任务
const scheduleMidnightCall = () => {
  const timeUntilMidnight = getTimeUntilMidnight();
  setTimeout(() => {
    getChartsData2();
    // 每天 0 点执行一次
    setInterval(getChartsData2, 24 * 60 * 60 * 1000);
  }, timeUntilMidnight);
};
// 饼图
const getChartsData3 = async () => {
  const res = await fetchParams("get_ckdhkb_mrdhfx");
  let params = { action: "biz/reports/get_ckdhkb_jrdhfx", ...res };
  const { data } = await getDataBySQLDesc(params);
  data3.value.time = moment(data[0].日期).format("YYYY-MM-DD") || "";
  data3.value.NotBatch = data[0].未到批次 || "";
  data3.value.AllBatch = data[0].总批次 || "";
  let num = Number(data[0].到货率) * 100 || 0;
  option.value.title.text = "{a|到货率}\n{b| " + num + " %}";
  option.value.series[0].data = [num];
};
onMounted(() => {
  getTableData();
  getChartsData2();
  getChartsData3();
  scheduleMidnightCall();
});
</script>

<template>
  <div class="flex flex-col arrived">
    <h1 class="text-center text-2xl font-bold mb-4 text-gray-800">到货看板</h1>
    <div class="flex flex-row arrived-content">
      <div class="w-3/5">
        <dv-scroll-board class="scrollBoard" :config="config" />
      </div>
      <div class="w-2/5">
        <h3>{{ data3.time }}</h3>
        <div class="batchBox">
          <div class="batchItem">
            <div class="batchName">未到批次</div>
            <div class="batchNum batchNum1">{{ data3.NotBatch }}</div>
          </div>
          <div class="batchItem">
            <div class="batchName">今日总批次</div>
            <div class="batchNum">{{ data3.AllBatch }}</div>
          </div>
        </div>
        <div class="chart chart1">
          <EChartsComponent :extraOptions="option" type="pie" />
        </div>
        <div class="chart">
          <EChartsComponent :extraOptions="option2" type="bar" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main-content.arrived {
  margin: 0;
  height: 100%;
  padding: 20px;
}

.dv-scroll-board {
  color: #000; // 表体字体颜色修改为黑色;
}

.chart {
  height: calc(40% - 0.5rem);
  background: #fff;
  border-radius: 0.5rem;
  margin: 0 1rem;
}

.chart1 {
  margin-bottom: 1rem;
}

.arrived-content {
  height: calc(100% - 32px);
}

.scrollBoard {
  height: 100%;
  background: #fff !important;
}

// .dv-scroll-board .rows {
//   background: #fff !important;
// }

h3 {
  height: 50px;
  display: flex;
  justify-content: center;
}

.batchBox {
  height: calc(20% - 50px);
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  box-sizing: border-box;
}

.batchItem {
  height: calc(100% - 1rem);
  width: calc(50% - 0.5rem);
  background: #fff;
  border-radius: 0.5rem;
  // background: rgba(0, 93, 207, 0.2);
}

.batchName {
  height: 3rem;
  line-height: 3rem;
  font-size: 1.2rem;

  text-align: center;
}

.batchNum {
  height: calc(100% - 3rem);
  font-size: 2.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #005dcf;
}

.batchNum1 {
  color: #999;
}
</style>
